<!-- 个人中心 -->
<template>
	<view class="container">
		<view class="cu-form-group" style="min-height: 150rpx">
			<view class="title">胡博士珠宝同学会入会申请</view>
		</view>
		<view class="cu-form-group">
			<view class="title">*姓名：</view>
			<input placeholder="请输入姓名" v-model="name" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="cu-form-group">
			<view class="title" style="flex: 1;">*性别：</view>
			<view>
				<!-- <label class="radio"> -->
				<radio-group @change="radioChange">
					<radio value="1" checked="true" />先生
					<!-- </label> -->
					<!-- <label class="radio"> -->
					<radio value="2" />女士
					<!-- </label> -->
				</radio-group>
			</view>

		</view>
		<view class="cu-form-group">
			<view class="title">*年龄：</view>
			<input v-model="age" placeholder="请输入您的年龄" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">*职务：</view>
			<input v-model="duties" placeholder="请输入您的职务" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">*手机：</view>
			<input v-model="tel" placeholder="请输入您的手机" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">*邮箱：</view>
			<input v-model="mail" placeholder="请输入您的邮箱" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="cu-form-group">
			<view class="title" style="flex: 1;">*常驻城市：</view>
			<view>
				<picker mode="region" :value="regionValue" @change="bindRegionChange">
					<image v-if="regionValue.length ===0" style="width: 34rpx;height: 20rpx;"
						src="../../static/image/zb17.png"> </image>
					<view v-else>{{region}}</view>
				</picker>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">*工作单位：</view>
			<input v-model="company" placeholder="请输入您的工作单位"
				placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
		</view>
		<view class="shuoming" style="display: flex;align-items: center;">
			<checkbox-group @change="checkChange">
				<checkbox value="true" />
			</checkbox-group>
			<view> <text @click="open()" style="color: #999999;">我已阅读并接受</text>
				<text @click="open()" style="color: #DE2415;">同学会入会申请、补充条款及其他所有内容</text>
			</view>
		</view>
		<view @click="success()" class="searchBtn">确认报名</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popbox">
				<view class="bt">胡博士珠宝同学会入会协议</view>
				<view class="nr">更新日期2020年12月03日</view>
				<view class="nr">
					《胡博士珠宝同学会使用协议》（以下简称本协议）是由深圳市胡博士珠宝文化传播有限公司网站（包括PC端、移动端及应用程序）的用户（以下简称“用户”或“您”）与胡博士珠宝同学会网站的运营方，即深圳胡博士文化传播有限公司（以下简称“本平台”）等相关事宜共同缔结。本协议具有合同效益，您应当阅读并遵守本协议。请您务必审慎阅读、充分理解各条款内容，特别是以黑体加粗形式提醒您主义的条款。
				</view>
				<view class="title1">一、协议确认
				</view>
				<view class="nr">
					1、您点击确认本协议条款并点击注册后，才能成为珠宝同学会的正式注册用户，并享受各类服务。在您完成用户注册后，即表示您接受并同意本协议。若您不同意本协议，或对本协议有任何疑问的，请您停止胡博士珠宝同学会的注册程序。2、您点击确认本协议条款并点击注册后，才能成为珠宝同学会的正式注册用户，并享受各类服务。在您完成用户注册后，即表示您接受并同意本协议。若您不同意本协议，或对本协议有任何疑问的，请您停止胡博士珠宝同学会的注册程序。
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				sex: '1',
				age: '',
				duties: '',
				tel: '',
				mail: '',
				address: '',
				company: '',
				regionValue: [],
				region: '省、市、区、街道',
				infoData: {},
				imgList: [{
						id: 0,
						img: '../../static/image/zb1.png'
					},
					{
						id: 1,
						img: '../../static/image/zb2.png'
					},
					{
						id: 2,
						img: '../../static/image/zb3.png'
					},
					{
						id: 3,
						img: '../../static/image/zb4.png'
					},
				],
				ischeck: false,
			}
		},
		onLoad() {
			console.log('11', this.regionValue.length)
		},
		onShow() {

		},
		computed: {

		},
		methods: {
			checkChange(e) {
				console.log('e', e)
				if (e.detail.value.length > 0) {
					this.ischeck = true
				}
			},
			radioChange(e) {
				console.log('e', e)
				this.sex = e.detail.valusse == 1 ? '男' : '女'
			},
			submit() {

			},
			bindRegionChange(e) {
				console.log('112', this.regionValue, e)
				console.log(('e', e))
				if (e.detail.value.length > 0) {
					this.regionValue = e.detail.value
					this.region = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
				}
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			success() {
				if (this.ischeck == false) {
					uni.showToast({
						title: '请先阅读使用协议 '
					})
					return
				}
				let that = this
				that.$api.societyAdd({
					name: that.name,
					sex: that.sex,
					age: that.age,
					duties: that.duties,
					tel: that.tel,
					mail: that.mail,
					address: that.region,
					company: that.company,
				}).then(res => {
					this.$u.toast(res.msg);
					console.log('res.msg', res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/jewel/successfully'
							})
						}, 1000);
					} else {

					}
				})
				//           uni.request({
				//               url: 'https://huboshizb.bigchun.com/api/info/societyAdd', //仅为示例，并非真实接口地址。
				//               method: 'POST',
				//               data: {
				//                   name:that.name,
				// sex:that.sex,
				// age:that.age,
				// duties:that.duties,
				// tel:that.tel,
				// mail:that.mail,
				// address:that.region,
				// company:that.company,
				//               },
				//               success: (res) => {
				//                   console.log('详情res', res)
				//               }
				//           });

			}
		},
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background: #ffffff;
	}

	.container {
		padding: 0rpx 30rpx 30rpx 30rpx;
	}

	.cu-form-group {
		background-color: var(--white);
		// padding: 1rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 90rpx;
		border-bottom: 0.5px solid #eeeeee;
	}

	.cu-form-group input {
		text-align: right;
	}

	.title {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.searchBtn {
		width: 280rpx;
		height: 78rpx;
		background: #de2415;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		line-height: 75rpx;
		color: #ffffff;
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
		margin: 50rpx auto;
	}

	.grid {
		display: flex;
		flex-wrap: wrap;
	}

	.margin-bottom {
		margin-bottom: 30rpx;
	}

	.text-center {
		text-align: center;
	}

	.grid.col-2>view {
		width: 50%;
	}

	.padding {
		padding: 30rpx;
	}

	.bg-cyan {
		background-color: var(--cyan);
		color: var(--white);
	}

	.name {
		font-size: 30rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
	}

	.shuoming {
		display: flex;
		margin-top: 22rpx;
	}

	.popbox {
		height: 1092rpx;
		background: #ffffff;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		opacity: 1;
		padding: 30rpx;
	}

	.bt {
		font-size: 32rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.nr {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #666666;
		margin-top: 30rpx;
	}

	.title1 {
		font-size: 28rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #333333;
		margin-top: 50rpx;
	}
</style>
